import React from 'react'
import ReactDOM from 'react-dom'
import './css/Trees.css'


class Trees extends React.Component {
  constructor (props) {
    super(props)
    this.state = { 
    }
  }
  theme = 'default'; 
  componentWillMount = () => {  
      if(this.props.treesConfig !== undefined) this.config = Object.assign(this.config,this.props.treesConfig);
      if(this.props.treesData !== undefined) this.data = Object.assign(this.data,this.props.treesData);  
  }
  componentDidMount = () => { 
      this.getData(this.config.key,{})
  }
 
    config = {
        width:  350, 
        height:600,
        theme:'default',    
        checkbox:true,
        childThreeOpen:false,
        icon:'./assets/Trees/json-down.png',
        imgStyle:{ width: 13,  height: 13,   opacity: .35 , position: 'relative',  left: '-10px' },
        checkData:[],
        treesClick : (item,e) => {
            if(item.isperson=='true'){ 
                // this.config.checkData.push(item)
            }else if(item.data&&item.data.length>0){
                if(e.target.nodeName=='LABEL'||e.target.nodeName=='IMG'){
                    e.target.parentNode.className =e.target.parentNode.className =='title collapsed'?'title':'title collapsed';
                    e.target.parentNode.nextSibling.style.display =e.target.parentNode.className =='title collapsed'?'none':'block';
                }else{
                    e.target.className =e.target.className =='title collapsed'?'title':'title collapsed';
                    e.target.nextSibling.style.display =e.target.className =='title collapsed'?'none':'block';
                } 
            }else{
                
            }
        }
    }

    data=[  ]
    getData=(key,par)=>{
        let that=this;
            T.ajax({
            key: key,
            data: par, 
            success: function success(result) { 
                result = typeof(result) =='string'? JSON.parse(result):result;
                that.proDataFn(result.data);  
            }
        }); 
    } 

    proDataFn = (data) => { //数据处理
        let temp = [];
        let firstindex = 0,
            twoindex = 0,
            thirindex = 0;
        this.data = [];
 

        data.map((item, i) => { //第一级
            let fdata = item;
            let firstindex = 0;
            data.map((jtem, j) => {
                if (fdata.pid == jtem.id) {} else {
                    firstindex++;
                    if (firstindex == data.length) { 
                        fdata.key = i + '';
                        temp.push(fdata);
                    }
                }
            })
        })
        temp.map((ztem, z) => {
            ztem.data = [];
            data.map((htem, h) => {
                if (ztem.id == htem.pid) { //第二级 
                    htem.key = z + '-' + h;
                    ztem.data.push(htem)
                }
            })
        })
        temp.map((ztem, z) => {
            if (ztem.data) {
                ztem.data.map((ktem, k) => {
                        let hasC = 0;
                        data.map((ntem, h) => {
                            if (ktem.id == ntem.pid) { //第三级
                                hasC++;
                                if (hasC == 1) {
                                    ktem.data = [];
                                } 
                                ntem.key = z + '-' + k + '-' + h;
                                ktem.data.push(ntem)
                            } else {}
                        })
                    })
            }
        })
        this.data = temp; 
      this.setState({})
    }

    handl = (data) =>{
        let checktpl='';
        let childThreeOpen = this.config.childThreeOpen==false?'none':'block'; 
        let titleDefaultClass = this.config.childThreeOpen==false?'title collapsed':'title'; 
        if(this.config.checkbox){
            checktpl = <input type="checkbox" name=""   / >;
        };
     return (
         <div className='TreeWrap'>
             { 
                    data.map((item,i)=>{ 
                        if(item.data){//有下一级
                             let chexkPerson =item.isperson=='true'?checktpl:<img src={this.config.icon} alt="" style={this.config.imgStyle} />; 
                              
                              return (
                                <div className='firstWrap' >
                                    <div className='title' data-id={item.id} onClick={()=>{this.config.treesClick(item,event)}}>
                                       {chexkPerson}<label htmlFor={item.key}>{item.name}</label> 
                                    </div>
                                    <div className='content'>
                                        {
                                            item.data.map((jtem,j)=>{ 
                                                if(jtem.data){  
                                                    let chexkPerson =jtem.isperson=='true'?<input type="checkbox" name="" value={jtem.name} data-origin_id={jtem.origin_id}  id={jtem.key}/ >:<img src={this.config.icon} alt="" style={this.config.imgStyle} />;  
                                                    
                                                    return (
                                                        <div  className='twoWrap' >
                                                            <div className={titleDefaultClass} data-id={jtem.id} onClick={()=>{this.config.treesClick(jtem,event)}}>
                                                                {chexkPerson}<label htmlFor={jtem.key}>{jtem.name}</label>
                                                            </div>
                                                            <div className='content' style={{display:childThreeOpen}}>
                                                                {
                                                                    jtem.data.map((ktem,k)=>{ 
                                                                         let chexkPerson =ktem.isperson=='true'?<input type="checkbox" name="" value={ktem.name} data-origin_id={ktem.origin_id}  id={ktem.key}/ >:'';  
                                                                        return(
                                                                            <div className='threeWrap' > 
                                                                                <div  className='title' data-id={ktem.id} onClick={()=>{this.config.treesClick(ktem,event)}}>
                                                                                     {chexkPerson}<label htmlFor={ktem.key}>{ktem.name}</label>
                                                                                </div>
                                                                            </div>
                                                                        )
                                                                    }) 
                                                                }
                                                            </div>
                                                        </div>
                                                    )
                                                }else{  
                                                    let chexkPerson =jtem.isperson=='true'?<input type="checkbox" name="" value={jtem.name} data-origin_id={jtem.origin_id}  id={jtem.key} / >:'';  
                                                    let icon =jtem.isperson=='false'&&jtem.data&&jtem.data.length>0?<img src={this.config.icon} alt="" style={this.config.imgStyle} />:'';
                                                    return (
                                                        <div  className='twoWrap' >
                                                             <div className='title ' onClick={()=>{this.config.treesClick(jtem,event)}}>
                                                                 {icon}{chexkPerson}<label htmlFor={jtem.key}>{jtem.name}</label>
                                                            </div> 
                                                        </div>
                                                    )
                                                }
                                    
                                            })
                                        }
                                    </div>
                                </div>
                            )
                        }else{
                              return (
                                <div>
                                    {item.name} 
                                </div>
                            )
                        }
                      
                    })
             }
         </div>
     )
    }


  render () {  
      if(this.props.treesData !== undefined) this.data = Object.assign(this.data,this.props.treesData); 
      
    return ( 
      <div className = {'Trees ' + this.theme}  style={{height:this.config.height,    overflow: 'auto'}}>
            {  this.handl(this.data)}
      </div>
    )
  }
}

export default Trees